<template>
  <div id="myTag">
    <van-divider>已选标签</van-divider>
    <div v-if="hasTagList?.length === 0" style="text-align: center">
      请选择标签
    </div>
    <van-row gutter="15" style="padding: 0 5vw">
      <van-col v-for="tag in hasTagList" style="margin-bottom: 10px">
        <van-tag
            closeable
            size="medium"
            type="primary"
            @close="close(tag)"
        >
          {{ tag }}
        </van-tag>
      </van-col>
    </van-row>
    <van-divider>选择标签</van-divider>
    <van-row gutter="15" style="padding: 0 5vw">
      <van-col v-for="tag in notHasTagList" style="margin-bottom: 10px">
        <van-tag
            size="medium"
            type="primary"
            @click="open(tag)"
        >
          {{ tag }}
        </van-tag>
      </van-col>
    </van-row>
    <van-divider
        :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
            }"
    >
    </van-divider>
    <div style="width: 200px; margin: 0px auto">
      <van-button round block type="success" native-type="submit" @click="onSubmit">
        点击修改标签
      </van-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import myAxios from "@/plugins/myAxios.js";
import {Toast} from "vant";
// 解构赋值
const route = useRoute();
const router = useRouter();
let { userId, hasTagList } = route.query;
if (hasTagList) {
  hasTagList = ref(eval('(' + hasTagList + ')'));
} else {
  hasTagList = ref([]);
}

const notHasTagList = ref([]);
const tagList = ref([]);

onMounted(async () => {
  myAxios
      .get("/tag/getTagVOS")
      .then((res) => {
        if (res.data.code == 1) {
          tagList.value = res.data?.data;
          notHasTagList.value = tagList.value.filter(item => {
            for (let i = 0; i < hasTagList.value?.length; i ++ ) {
              if(item.text == hasTagList.value[i]) return false;
            }
            return true;
          }).map(item => {
            return item.text;
          })
          console.log("/tag/getTagVOS 标签获取成功");
        } else {
          console.error("/tag/getTagVOS 标签获取失败:" + res.data.msg);
        }
      })
});
const close = (tag) => {
  hasTagList.value = hasTagList.value.filter((item) => {
    return item !== tag;
  })
  notHasTagList.value.push(tag);
};
const open = (tag) => {
  notHasTagList.value = notHasTagList.value.filter((item) => {
    return item !== tag;
  });
  hasTagList.value.push(tag);
};
const onSubmit = async () => {
  myAxios
      .put("/user", {
        id: userId,
        tags: JSON.stringify(hasTagList.value),
      })
      .then((res) => {
        if (res.data.code == 1) {
          Toast.success("修改标签成功");
          console.log("/user put 修改标签成功");
          router.replace({
            path: "/inter/user",
          });
        } else {
          Toast.fail("修改标签失败: " + res.data.msg);
          console.log("/user put 修改标签失败:" + res.data.msg);
        }
      })
};
</script>

<style scoped>
#myTag {

}
</style>